<html>
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
        .con {
            width: 100%;
            height: 100%;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #e60000;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: #2116be;
        }

        .aside1 {
            width: 20%;
            height: 700px;
            background-color: #be1656;
            float: left;
        }

        .main1 {
            width: 60%;
            height: 700px;
            background-color: #16be2c;
            float: left;
        }

        .aside2 {
            width: 20%;
            height: 700px;
            background-color: #1acaff;
            float: right;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: #e4f500;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="con">
        <header class="header">页眉</header>
        <nav class="nav">导航</nav>
        <div class="father">
            <aside class="aside1">左侧栏</aside>
            <section class="main1">主体内容</section>
            <aside class="aside2">右侧栏</aside>
        </div>
        <footer class="footer">页脚</footer>
    </div>
</body>

</html>